<template>
  <div>
    <mt-header title="用户列表" fixed>
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="list" ref="list">
      <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
        <ul>
          <li class="search">
            <input type="text" v-model="search" placeholder="搜索">
            <i class="iconfont el-icon-dingdan" @click="userSearch"></i>
          </li>
          <li v-for="(item, index) in userList" :key="index">
            <span style="line-height: 40px;margin-left: 8px;font-size: 14px;">{{ item.nickname }}</span>
            <div class="avatar">
              <img :src="item.profilePhotoPath" alt="" width="100%" height="100%">
            </div>
            <div class="btn">
              <mt-button size="small" type="primary" @click.native="userSet(item.id, index)">折扣设置</mt-button>
            </div>
          </li>
          <li v-if="allLoaded" class="last">
            --已加载全部--
          </li>
        </ul>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-list',
  data () {
    return {
      url: {
        list: '/distributor/invite/user/list',
        update: '/distributor/invite/user/discount/update'
      },
      userList: [],
      isAutoFill: false,
      allLoaded: false,
      pageNum: 1,
      search: ''
    }
  },
  methods: {
    loadBottom () {
      let toast = this.$Toast({
        message: '正在加载',
        iconClass: 'iconfont el-icon-dingdan',
        duration: -1
      })
      this.$ajax.post(this.url.list, {pageNum: this.pageNum++, pageSize: 15}).then(res => {
        if (res.data.success) {
          this.userList.push(...(res.data.data.list))
          if (res.data.data.nextPage === 0) {
            this.allLoaded = true
          }
        }
        toast.close()
        this.$refs.loadmore.onBottomLoaded()
      })
    },
    userSet (id, index) {
      let str = this.userList[index].userDiscount ? '请输入折扣, 现折扣为' + this.userList[index].userDiscount + '%' : '请输入折扣， 尚未设置折扣'
      str += '<br>折扣范围101~1000'
      this.$MessageBox.prompt(str).then(({ value, action }) => {
        value = parseInt(value)
        this.$ajax.post(this.url.update, {userIds: [id], discount: value}).then(res => {
          if (res.data.success) {
            this.userList[index].userDiscount = value
            this.$Toast({
              message: '操作成功',
              iconClass: 'iconfont el-icon-dingdan'
            })
          } else {
            this.$Toast(res.data.errorMessage)
          }
        })
      })
    },
    userSearch () {
      console.log(this.search)
    }
  },
  created () {
    this.loadBottom()
  },
  mounted () {
    this.$refs.list.style.height = screen.availHeight - 40 + 'px'
  }
}
</script>

<style scoped>
  .list{
    margin-top: 40px;
    overflow: auto;
  }
  .list li{
    overflow: hidden;
    border-bottom: 1px solid #dddee1;
    padding: 4px;
  }
  .list li.last{
    text-align: center;
    border-bottom: none;
    font-size: 12px;
    color: #bbbec4;
  }
  .avatar{
    width: 40px;
    height: 40px;
    background-color: skyblue;
    border-radius: 100%;
    float: left;
    overflow: hidden;
  }
  .btn{
    float: right;
  }
  .search{
    height: 30px;
    position: relative;
  }
  .search input{
    background-color: #e9eaec;
    border: none;
    outline: none;
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding-left: 8px;
    border-radius: 4px;
  }
  .search i{
    position:absolute;
    right: 10px;
    top: 8px;
    color: #80848f;
  }
</style>
